<template>
  <div>
    <div class="socialTitle clearfix">
      <div class="titleName fl" v-html="title"></div>
    </div>
    <div>
      <!-- 搜索栏 -->
      <!-- 往这里面传tindex，让他判断如果等于2的时候把查找改为 确认授权-->
      <franchSearch v-if="tindex!=3" :type='companyType'></franchSearch>
      <!-- 表格 -->
      <div class="pd30" v-if="tindex!=2">
        <ul class="checkTab" v-if="companyType=='3'">
          <!-- 这里显示的是   待审核   已通过和   未通过 -->
          <!-- 点击事件的时候 把一整个item作为参数传过去 -->
          <!-- 当current===item.status的时候给他加一个 active  这个类-->
          <li
            v-for="item in tabs"
            :key="item.status"
            v-html="item.label"
            :class="{'active':current===item.status}"
            @click="clickTab(item)"
          ></li>
        </ul>
        <el-table :data="tableData" stripe style="width: 100%" border>
          <!-- tableColumn 会先在  mounted  阶段 挂在好  然后在这里进行 遍历 -->
          <!-- 显示的其实就是   待审核  已通过  为通过下面的表头（企业名称：所在地区。。。。 ） -->
          <template v-for="item in tableColumn">
            <!-- 如果  item.value不等于  ‘opt’ 那就 显示   ，也就是说把tableColumn里面的每一项都循环遍历在上面，当遍历到‘opt’的时候就不让他显示 -->
            <el-table-column
              v-if="item.value!=='opt'"
              :key="item.value"
              :prop="item.value"
              :label="item.label"
              align="center"
            ></el-table-column>
            <!-- 操作部分的代码 -->
            <el-table-column
              :key="item.value"
              v-else-if="item.value=='opt'"
              label="操作"
              align="center"
            >
              <!-- 操作部分的代码  下面的   自定义列表 -->
              <template slot-scope="scope">
                <el-button
                  v-if="companyType=='3'"
                  @click="check(scope.row)"
                  type="text"
                  size="small"
                >审核</el-button>
                <el-button
                  v-if="companyType!='3'"
                  @click="toReport(scope.row)"
                  type="text"
                  size="small"
                >删除并取消授权</el-button>
                <el-button
                  v-if="companyType!='3'"
                  @click="details(scope.row)"
                  type="text"
                  size="small"
                >详情</el-button>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog
      :visible.sync="checkFlag"
      width="980px"
      custom-class="jhdialog"
    >
      <popup v-if="companyType=='3'" @cancelCheck="close"></popup>
    </el-dialog>
  </div>
</template>

<script>
import franchSearch from "../franchSearch/franchSearch.vue";
import popup from "../popup/popup.vue";
export default {
  components: {
    franchSearch,
    popup
  },
  props: ["title", "companyType", "tindex"],
  data() {
    return {
      tableData: [
        {
          authorizerName: "沈锦峰",
          authorizedAccount: "13584730396",
          area: "上海-上海-闵行"
        }
      ],
      tableColumn: [
        { label: "被授权人姓名", value: "authorizerName" },
        { label: "被授权账号", value: "authorizedAccount" },
        { label: "所在地区", value: "area" },
        { label: "操作", value: "opt" }
      ],
      tabs: [
        { label: "待审核", value: 12, status: "0", index: "0" },
        { label: "已通过", value: 200, status: "1", index: "1" },
        { label: "未通过", value: 5, status: "2", index: "1" }
      ],
      current: "0",
      checkFlag: false, //是否显示审核详情
    };
  },
  created() {},
  methods: {
    clickTab(item) {
      console.log(item);

      // 点击切换 待审核   已通过   未审核的时候 把  item。status赋值给当前date里面的current这个属性
      // 给了这个current  一个 0，  1 ，  2 这三个 值里面的一个
      // item.index 有三个值   待审核   已通过   未通过  分别是   0    1    1
      this.current = item.status;
      // if (this.ct5 != '5') {
      //   console.log('xixixixixixiixxixi')
      //   this.getList(1);
      // } else if (this.ct5 == '5') {
      //   console.log('hahahhahahahahahha')
      //   this.getList2(1)
      // }
    },
    check() {
      console.log("111111");
      this.checkFlag=true
    },
    close () {
      this.checkFlag = false;
    },
    
  },
  watch: {
    companyType: {
      handler(nval, oval) {
        this.current = "0";
        // this.tableColumn = this.columnObj[this.tindex + this.current];
        // this.ct5 = nval;

        //  if(nval!='5'){
        //     console.log(1)
        //     this.getList(1);
        //   }else if(nval=='5'){
        //     console.log(2);
        //     setTimeout(() => {
        //       console.log("这里在定时器里面")
        //        this.getList2(1);
        //     }, 10);

        //   }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style scoped>
.info li {
  float: left;
  /*width: 50%;*/
  padding: 10px 0;
}

/* .info li:first-child {
  width: 100%;
} */

.info li:nth-child(2) {
  width: 100%;
}

/* li:nth-child(odd) {
  width: 50%;
}

li:nth-child(even) {
  width: 50%;
} */

.info li .infoLabel {
  color: #999;
  display: inline-block;
  width: 110px;
  text-align: right;
  margin-right: 10px;
  float: left;
}

.info li .infoText {
  color: #404040;
  display: inline-block;
}

.info li .licenseimg1 {
  display: flex;
  flex-wrap: wrap;
}

.info li .licenseimg1 img {
  width: 86px;
  height: 86px;
  margin: 0 6px 6px 0;
}

.info li .infoLabel_left {
  float: left;
  line-height: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.info li .infoText_right {
  float: right;
  width: 482px;
  line-height: 19px;
}

.info li img {
  vertical-align: top;
}

.status {
  color: #0064e4 !important;
}

.pass {
  color: #19ae0e !important;
}

.red {
  color: #e60012 !important;
}

.btnBox {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.btnBox button {
  width: 120px;
  margin-right: 50px;
}

.company-introduction-content,
.infoTexty {
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 20px;
}

.company-introduction-content {
  width: 80%;
}

.company-introduction-title {
  color: #999;
  width: 110px;
  text-align: right;
  margin-right: 10px;
  line-height: 20px;
}

.company-introduction {
  overflow: hidden;
}

.tabShow {
  margin-top: 30px;
  padding-bottom: 20px;
}

.company-introduction-title1 {
  margin-top: 20px;
  padding: 10px 20px;
  border-top: 1px dashed #d2d2d2;
  font-size: 16px;
}

.company-introduction-title1 > span:first-child {
  float: left;
}

.company-introduction-title1 > span:last-child {
  float: right;
  color: #0064e4;
  cursor: pointer;
  border: 1px solid #0064e4;
  padding: 4px 6px;
}

.info1 li {
  float: left;
  /*width: 50%;*/
  padding: 10px 0;
}

.info1 li .infoLabel {
  color: #999;
  display: inline-block;
  width: 110px;
  text-align: right;
  margin-right: 10px;
  float: left;
}

.info1 li .infoText {
  color: #404040;
  display: inline-block;
}
</style>
